<template>
	<view class="page">
		<!-- <view class="header">
			<image class="back" src="../../static/tian/list.png" mode=""></image>
			<view class="text">{{$t('first.title22')}}</view>
			<view></view>
		</view> -->
		<customNavbar :title="$t('first.title22')" :ids="'1'" :timeBtnShow="false" />
		<view class="con">
			<view class="title">{{$t('first.title23')}}</view>
			<view class="title1">{{$t('first.title24')}}</view>
			<view class="item" @click="detail(1)">
				<image class="bg" src="/static/tian/bg1.png" mode=""></image>
				<view class="text">{{$t('first.title89')}}</view>
				
			</view>
			<view class="item" @click="detail(2)">
				<image class="bg" src="/static/tian/nft.png" mode=""></image>
				<view class="text">{{$t('first.title90')}}</view>
			
			</view>
			<view class="item" @click="detail(3)">
				<image class="bg" src="/static/tian/qkyx.png" mode=""></image>
				<view class="text">{{$t('first.title91')}}</view>
				<view class="zzc" v-if="item > 3">{{$t('first.title25')}}</view>
			</view>
			<view class="item" @click="detail(item)">
				<image class="bg" src="/static/tian/hwzc.png" mode=""></image>
				<view class="text">{{$t('first.title92')}}</view>
				<view class="zzc" >{{$t('first.title25')}}</view>
			</view>
			<view class="item" @click="detail(item)">
				<image class="bg" src="/static/tian/tzjy.png" mode=""></image>
				<view class="text">{{$t('first.title93')}}</view>
				<view class="zzc" >{{$t('first.title25')}}</view>
			</view>
			<view class="item" @click="detail(item)">
				<image class="bg" src="/static/tian/xnsj.png" mode=""></image>
				<view class="text">{{$t('first.title94')}}</view>
				<view class="zzc" >{{$t('first.title25')}}</view>
			</view>
			<view class="item" @click="detail(item)">
				<image class="bg" src="/static/tian/shangcheng.png" mode=""></image>
				<view class="text">{{$t('first.title95')}}</view>
				<view class="zzc" >{{$t('first.title25')}}</view>
			</view>
			<view class="item" @click="detail(item)">
				<image class="bg" src="/static/tian/zhifu.png" mode=""></image>
				<view class="text">{{$t('first.title96')}}</view>
				<view class="zzc" >{{$t('first.title25')}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import customNavbar from '../index/navigationBar.vue'
	export default{
		components: {
			customNavbar
		},
		data(){
			return{
				
			}
		},
		methods:{
			detail(e){
				if(e==1){
					uni.navigateTo({
						url:'./chat'
					})
				}
				if(e==2){
					uni.navigateTo({
						url:'./nft'
					})
				}
				if(e >2){
					uni.navigateTo({
						url:'./detail'
					})
				}
			}
		}
	}
</script>

<style scoped>
	*{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	.page{
		width: 100%;
		height: 100%;
		min-height: 100vh;
		background-color: #ecf0f5;
	}
	.header{
		width: 100%;
		height: 104rpx;
		padding: 20rpx;
		position: fixed;
		background-color: #ecf0f5;
		display: flex;
		top: 0;
		left: 0;
		align-items: center;
		justify-content: space-between;
		z-index: 999;
	}
	.back{
		width: 48rpx;
		height: 48rpx;
	}
	.header .text{
		font-size: 36rpx;
		font-family: PingFangSC-Medium,PingFang SC;
		font-weight: 600;
		color: #222;
	}
	.con{
		width: 100%;
		padding: 50rpx;
	}
	.title{
		color: #202020;
		font-size: 48rpx;
		font-family: AlibabaPuHuiTi-Bold;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		margin-bottom: 40rpx;
	}
	.title1{
		font-size: 24rpx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: #202020;
		margin-bottom: 50rpx;
	}
	.item{
		width: 100%;
		height: 280rpx;
		margin-bottom: 30rpx;
		position: relative;
	}
	.item .bg{
		width: 100%;
		height: 100%;
	}
	.item .text{
		position: absolute;
		top: 20%;
		left: 46rpx;
		width: 140rpx;
		font-size: 42rpx;
		font-family: AlimamaShuHeiTi-Bold,AlimamaShuHeiTi;
		font-weight: 700;
		color: #fff;
		text-align: center;
	}
	.item .zzc{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0,0,0,.5);
		padding: 0 20rpx 0 0;
		color: #fff;
		font-size: 40rpx;
		display: flex;
		justify-content: end;
		align-items: end;
		font-weight: 600;
		border-radius: 30rpx;
	}
</style>